<template>
  <el-dialog :visible.sync="show" title="绑定管理员" center :before-close="close" width="1070px">
    <div class="main_box">
      <el-row class="header-row">
        <el-col>
          <div class="search_wrap">
            <el-form :inline="true" :model="filters" ref="searchForm">
              <el-form-item prop="userCode">
                <el-input v-model="filters.userCode" :clearable="true" placeholder="管理员编号"></el-input>
              </el-form-item>
              <el-form-item prop="managerLevels">
                <el-select v-model="filters.managerLevels" placeholder="管理员类别">
                  <el-option v-for="item in levelsList" :value="item.value" :label="item.label" :key="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="nickName">
                <el-input v-model="filters.nickName" placeholder="姓名"> </el-input>
              </el-form-item>
              <el-form-item prop="phone">
                <el-input type="number" v-model="filters.phone" placeholder="电话号码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
                <el-button icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="fa fa-chain" @click="handleBinding">暂存绑定</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row ref="tableRow">
        <el-table :data="tableList" :fit="true" @selection-change="handleSelectChange">
          <el-table-column type="selection" align="center"> </el-table-column>
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="userCode" align="center" label="管理员编号" width="100"></el-table-column>
          <el-table-column prop="managerLevels" align="center" label="管理员类别" width="120">
            <template slot-scope="scope">
              <div>
                {{ formatLevels(scope.row.managerLevels) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="姓名"></el-table-column>
          <el-table-column label="性别" align="center" width="50">
            <template slot-scope="scope">
              <span>
                {{ scope.row.sex == 1 ? '男' : '女' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="年龄" align="center" prop="age"> </el-table-column>
          <el-table-column label="电话号码" align="center" prop="phone"> </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNo"
          :page-sizes="[20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, jumper, next, pager, prev"
          :total="page.pageTotal"
        ></el-pagination>
      </el-row>

      <el-row>
        <div style="line-height: 40px; color: black; font-weight: 800">待绑定的管理员</div>
        <el-table :data="submitList" :fit="true">
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="userCode" align="center" label="管理员编号" width="100"></el-table-column>
          <el-table-column prop="managerLevels" align="center" label="管理员类别" width="120">
            <template slot-scope="scope">
              <div>
                {{ formatLevels(scope.row.managerLevels) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="姓名"></el-table-column>
          <el-table-column label="性别" align="center" width="50">
            <template slot-scope="scope">
              <span>
                {{ scope.row.sex == 1 ? '男' : '女' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="年龄" align="center" prop="age"> </el-table-column>
          <el-table-column label="电话号码" align="center" prop="phone"> </el-table-column>
          <el-table-column label="已绑定" align="center">
            <template slot-scope="scope">
              <div style="color: #54bc00">
                {{ scope.row.isBinding ? '是' : '' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" style="color: red" type="text" @click="handleDelManager">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="$emit('updateShow', false)">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import BusinessDepartApi from '@/api/business/depart';
import ManagerBusinessApi from '@/api/business/manager';
export default {
  props: {
    show: {
      type: Boolean,
    },
    departId: {
      type: [Number, String],
    },
  },
  model: {
    prop: 'show',
    event: 'updateShow',
  },
  data() {
    return {
      filters: {
        userCode: '',
        managerLevels: '',
        nickName: '',
        phone: '',
      },
      tableList: [],
      maxHeight: 400,
      page: {
        pageNo: 1,
        pageTotal: 0,
        pageSize: 20,
      },
      levelsList: [
        { value: 0, label: '商户' },
        { value: 1, label: '部门' },
        { value: 2, label: '组' },
        { value: 3, label: '岗位' },
      ],
      selectedList: [],
      submitList: [],
    };
  },
  watch: {
    show(val) {
      if (val) {
        this.onSearch();
        this.getBindedList();
      }
    },
  },
  methods: {
    handleSelectChange(val) {
      this.selectedList = val;
    },
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.listTable();
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.listTable();
    },
    // 暂存绑定
    handleBinding() {
      if (this.selectedList.length == 0) {
        this.$message.error('请至少选择一项数据');
        return;
      }
      this.selectedList.forEach((item) => {
        if (!this.submitList.some((item2) => item2.managerId == item.managerId)) {
          this.submitList.push({ ...item });
        }
      });
    },
    // 删除管理员
    handleDelManager(row) {
      const index = this.submitList.findIndex((item) => item.managerId == row.managerId);
      this.submitList.splice(index, 1);
    },
    // 确认绑定
    confirm() {
      const ids = this.submitList.map((item) => item.managerId);
      if (ids.length == 0) {
        this.$message.error('请至少选择一项数据');
        return;
      }
      const params = {
        ids: ids,
        id: this.departId,
      };
      this.$confirm('确定绑定吗？', '提示', {}).then(() => {
        BusinessDepartApi.setDepartBinding(params).then((res) => {
          this.$Utils.notifySuccess('绑定成功');
          this.$emit('updateShow', false);
        });
      });
    },
    close() {
      this.$emit('updateShow', false);
    },
    formatLevels(cellValue) {
      if (cellValue === 0) {
        return '商户';
      } else if (cellValue === 1) {
        return '部门';
      } else if (cellValue === 2) {
        return '组';
      } else if (cellValue === 3) {
        return '岗位';
      }
    },
    listTable() {
      const data = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        userCode: this.filters.userCode,
        managerLevels: this.filters.managerLevels,
        nickName: this.filters.nickName,
        phone: this.filters.phone,
      };

      ManagerBusinessApi.listManager(data)
        .then((res) => {
          this.tableList = res.data.list;
          this.page.pageTotal = res.data.total;
        })
        .catch((error) => {});
    },
    getBindedList() {
      const params = {
        pageNo: 1,
        pageSize: 1000,
        isBinding: 1,
        departId: this.departId,
      };
      ManagerBusinessApi.listManager(params).then((res) => {
        this.submitList = res.data.list.filter((item) => item.isBinding);
      });
    },
    onSearch() {
      this.page.pageNo = 1;
      this.listTable();
    },
    resetForm() {
      this.$refs.searchForm.resetFields();
      this.onSearch();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  ::v-deep.el-dialog__body {
    padding-top: 0;
  }
}
</style>
